// var head = dument.querySelector('.header');

var fixed = document.querySelector('.toup')
var leader = fixed.offsetTop;

window.onscroll = function() {

    $('.toup').css({
        'opacity': '0.3',
        'backgroundColor': 'rgba(0,0,0,0.3)'
    })
    var sct = document.documentElement.scrollTop || window.pageYoffset || document.body.scrollTop;
    var target = sct + leader;
    move(fixed, target)
    if (sct >= 80) {
        $('.header').addClass('actives')

    } else {

        $('.header').removeClass('actives')


    }
}
$(function() {
    $(".box").on("click", function() {

        $('.container').toggleClass('filter')
        if ($(this).hasClass("active")) {
            $(this).removeClass("active").addClass("close");
            $(".nav-list").fadeOut();

        } else {
            $(this).removeClass("close").addClass("active");
            $(".nav-list").fadeIn();

        }

    })
});

function move(el, target) {
    if (el.timer) {
        clearInterval(el.timer)
    }
    if (el.offsetTop === target) {
        return
    }

    el.timer = setInterval(function() {
        var step = (target - el.offsetTop) / 10;
        if (Math.abs(step) <= 1) {
            step = step > 0 ? 1 : -1
        }
        el.style.top = el.offsetTop + step + 'px';
        // 终止条件
        if (el.offsetTop === target) {
            clearInterval(el.timer)
        }
    }, 1000 / 60)

}